<template>
  <div id="app" v-show="$route.meta.istrun">
    <van-tabbar v-model="active" active-color="rgb(137, 141, 137,0.7)">
      <van-tabbar-item class="tarBar" :to="item.path" v-for="(item, index) in tarBarList" :key="index">
        <span>{{ item.text }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
  <router-view></router-view>
</template>
<script>
export default {
  name: "AppVue",
  data() {
    return {
      active: 0,
      tarBarList: [
        {
          text: "首页",
          active: require("@/assets/images/home-action.png"),
          inactive: require("@/assets/images/home.png"),
          path: "/",
          class: "home",
        },
        {
          text: "分类",
          active: require("@/assets/images/classify-action.png"),
          inactive: require("@/assets/images/classify.png"),
          path: "/class",
          class: "classify",
        },
        {
          text: "购物车",
          active: require("@/assets/images/shopping-action.png"),
          inactive: require("@/assets/images/shopping.png"),
          path: "/ShoppingCart",
          class: "shopping",
        },
        {
          text: "个人",
          active: require("@/assets/images/my-action.png"),
          inactive: require("@/assets/images/my.png"),
          path: "/my",
          class: "my",
        },
      ],
    };
  },
  created() {
    // 监听 $route 对象的变化
    this.$watch("$route.path", (newPath) => {
      // 查找与当前路由对象路径匹配的选项卡的索引
      const activeIndex = this.tarBarList.findIndex(
        (tab) => tab.path === newPath
      );
      // 如果找到匹配的选项卡，则将 active 设置为该选项卡的索引
      if (activeIndex !== -1) {
        this.active = activeIndex;
      } else {
        // 如果找不到匹配的选项卡，则默认为 0
        this.active = 0;
      }
    });
  },
};
</script>
<style>
html {
  font-size: 0.2487vw;
}

.tarBar {
  background-color: rgb(237, 235, 235);
}
</style>